<template>
  <div>
    <el-color-picker
      v-for="index in colorsModel.length"
      :key="index"
      v-model="colorsModel[index - 1]"
      @change="(val: string) => onChange(val, index)"
      show-alpha
    ></el-color-picker>
    <span class="px-1 pt-1 ml-2 text-white bg-blue-500 rounded-md cursor-pointer" @click="handleReduceColor()">
      <el-icon><Minus /></el-icon>
    </span>
    <span class="px-1 pt-1 ml-2 text-white bg-blue-500 rounded-md cursor-pointer" @click="handleAddColor()">
      <el-icon><Plus /></el-icon>
    </span>
  </div>
</template>

<script lang="ts" setup>
import {
  Minus,
  Plus,
} from '@element-plus/icons-vue'
const colorsModel = defineModel({
  type: Array,
  required: true,
});

function handleAddColor() {
  colorsModel.value.push('#000000');
}

function handleReduceColor() {
  colorsModel.value.pop();
}

function onChange(value: string, index: number) {
  colorsModel.value[index - 1] = value;
  colorsModel.value = [...colorsModel.value];
}
</script>
